import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'

// 使用组件
Vue.use(VueRouter)

/* 
  component 的 value 两种写法;
  ①：导入需要跳转的组件 "import Home from '../views/Home.vue'"
    使用：component: Home 即可;
  ②：component: () => import( '组件路径');
    例如：component: () => import( '../views/Home.vue')

*/
const routes = [
  /* 
    使用 redirect 方法会改变路由 
    component 不该表路由  
  */
  {
    path: '/',  // url为 "/" 时跳转到home
    // component: Home,
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import( '../views/Home.vue'),
    /*
      嵌套路由
      错误记录：在另一台电脑的环境中，使用 '../' 的路径报错
      ① 使用 '@' 代替 '..'
      ② 在 "vue.config.js" 中 添加 "webpackChunName:'[request]'" 使用见第三行
    */
    children: [
      // 缺省时显示以下路由
      {
        path: '',
        redirect:'news'
      },
      {
        path: 'news',
        name:'news',
        // component: () => import( '../components/home/News.vue'),
        component: () => import( '@/components/home/News.vue'),
        // component: () => import(/*webpackChunName:"[request]"*/ '../components/home/News.vue')
        // 元数据  用来描述的数据
        meta: {
          title:'news'
        }
      },
      {
        path: 'message',
        name:'message',
        // component: () => import( '../components/home/Message.vue'),
        component: () => import( '@/components/home/Message.vue'),
        // component: () => import(/*webpackChunName:"[request]"*/  '../components/home/Message.vue')
      },
    ],
    meta: {
      title:'Home'
    }  
  },
  {
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue'),
    meta: {
      title:'About'
    }
  },
  /*
    一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
    在组件中使用 "this.$route" 获取对应的路由
  */
  {
    path: '/user/:userID',  //动态路由用法
    name: 'User',
    component: () => import( '../views/User.vue'),
    meta: {
      title:'User'
    }
  },
  {
    path: '/profile',  //路由传递参数
    name: 'profile',
    component: () => import( '../views/Profile.vue'),
    meta: {
      title:'profile'
    }
  },
  {
    path: '/goHome',
    redirect: '/',  // 更改跳转路径
  }
]

const router = new VueRouter({
  // 指定路由模式，未指定是默认是 hash 模式
  mode: 'history',
  routes
})

router.beforeEach((to, from, next) => {
  console.log(to, from);
  document.title = to.name;
  next()
})

export default router
